@import "base.less";

@esui-loader-color-for-light-bg: #6CCDC0;
@esui-loader-color2-for-light-bg: lighten(#6CCDC0, 25%);

// TODO: also for fallback loader for IE8
.@{ui-class-prefix}-loader {
    display: inline-block;
}

.@{ui-class-prefix}-loader.@{ui-class-prefix}-loader-backup {
    width: 24px;
    height: 24px;
    background-image: url('');
}

.@{ui-class-prefix}-loader.@{ui-class-prefix}-loader-backup * {
    display: none;
}

// bouncers effect
// http://tobiasahlin.com/spinkit
.esui-loader-bouncers(@dotSize:1.25em) {
    .@{ui-class-prefix}-loader-bouncers {
        text-align: center;
        > div {
            .size(@dotSize);
            background-color: @esui-loader-color-for-light-bg;

            .esui-circular();
            display: inline-block;
            .animation(esui-loader-bounce 1.4s infinite ease-in-out);
        }
        :nth-child(1) {
            .animation-delay(-.32s);
        }
        :nth-child(2) {
            .animation-delay(-.16s);
        }
    }

    @-webkit-keyframes esui-loader-bounce {
        0%, 80%, 100% {
            -webkit-transform: scale(0.0)
        }
        40% {
            -webkit-transform: scale(1.0)
        }
    }

    @keyframes esui-loader-bounce {
        0%, 80%, 100% { 
            transform: scale(0.0);
        } 40% {
            transform: scale(1.0);
        }
    }
}

// border spin effect
.esui-loader-border() {
    .@{ui-class-prefix}-loader-border {
        border-bottom: 6px solid @esui-loader-color2-for-light-bg;
        border-left: 6px solid @esui-loader-color2-for-light-bg;
        border-right: 6px solid @esui-loader-color2-for-light-bg;
        border-top: 6px solid @esui-loader-color-for-light-bg;
        display: inline-block;
        border-radius: 100%;
        .size(2em);
        .animation(esui-loader-border-spin .6s infinite linear);
    }
    @-webkit-keyframes esui-loader-border-spin {
        0% {
            -webkit-transform: rotateZ(0deg);
        }
        100% {
            -webkit-transform: rotateZ(360deg);
        }
    }
    @keyframes esui-loader-border-spin {
        from {
            transform: rotate(0deg);
        }
        to {
            transform: rotate(359deg);
        }
    }
}

// 2 borders spin
// http://codepen.io/varemenos/pen/IAzbo
.esui-loader-borders() {
    .@{ui-class-prefix}-loader-borders:before {
        content: '';
    }
    .@{ui-class-prefix}-loader-borders:before,
    .@{ui-class-prefix}-loader-borders {
        box-sizing: border-box;
        display: inline-block;
        padding: 0.5em;
        vertical-align: middle;
        text-align: center;
        border: 5px solid transparent;
        border-top-color: @esui-loader-color-for-light-bg;
        border-bottom-color: @esui-loader-color-for-light-bg;
        border-radius: 50%;
        .animation(esui-loader-borders-spin 1s infinite);
    }
    @-webkit-keyframes esui-loader-borders-spin {
        0% {
            transform: rotateZ(0deg);
        }
        100% {
            transform: rotateZ(360deg);
        }
    }
    @keyframes esui-loader-borders-spin {
        0% {
            -webkit-transform: rotateZ(0deg);
        }
        100% {
            -webkit-transform: rotateZ(360deg);
        }
    }
}

//spinner-wave
.esui-loader-spinner-wave(@height: 4em) {
    .@{ui-class-prefix}-loader-spinner-wave {
        height: @height;
        text-align: center;
        div {
            background-color: @esui-loader-color-for-light-bg;
            height: 100%;
            width: 6px;
            margin: 0 1px;
            display: inline-block;
            .animation(esui-loader-spinner-wave 1.2s infinite ease-in-out);
        }
        :nth-child(1) {
            .animation-delay(0s);
        }
        :nth-child(2) {
            .animation-delay(-1.1s);
        }
        :nth-child(3) {
            .animation-delay(-1s);
        }
        :nth-child(4) {
            .animation-delay(-0.9s);
        }
        :nth-child(5) {
            .animation-delay(-0.8s);
        }
    }
    @-webkit-keyframes esui-loader-spinner-wave {
        0%, 40%, 100% {
            .transform(scaleY(0.4)); 
        }
        20% {
            .transform(scaleY(1));
        } 
    }
    @keyframes esui-loader-spinner-wave {
        0%, 40%, 100% {
            .transform(scaleY(0.4));
        }
        20% {
            .transform(scaleY(1));
        } 
    }
}

//ratating-plane
.esui-loader-rotating-plane(@size:4em) {
    .@{ui-class-prefix}-loader-rotating-plane {
        .size(@size);
        background-color: @esui-loader-color-for-light-bg;
        .animation(esui-loader-ratating-plane 1.2s infinite ease-in-out);
    }
    @-webkit-keyframes esui-loader-ratating-plane {
        0% {
            .transform(perspective(120px)); 
        }
        50% {
            .transform(perspective(120px) rotateY(180deg)); 
        }
        100% {
            .transform(perspective(120px) rotateY(180deg) rotateX(180deg)); 
        }
    }
    @keyframes esui-loader-ratating-plane {
        0% {
            .transform(perspective(120px)); 
        }
        50% {
            .transform(perspective(120px) rotateY(180deg)); 
        }
        100% {
            .transform(perspective(120px) rotateY(180deg) rotateX(180deg)); 
        }
    }
}

//chasing dots
.esui-loader-chasing-dots(@size:4em) {
    .@{ui-class-prefix}-loader-chasing-dots {
        .size(@size);
        position: relative;
        text-align: center;
        .animation(esui-loader-chasing-dots-rotate 2.0s infinite linear);
        div {
            width: 60%;
            height: 60%;
            display: inline-block;
            position: absolute;
            top: 0;
            background-color: @esui-loader-color-for-light-bg;
            border-radius: 100%;
            .animation(esui-loader-chasing-dots-bounce 2.0s infinite ease-in-out);
        }
        :nth-child(2) {
            top: auto;
            bottom: 0px;
            .animation-delay(-1.0s);
        }
    }
    @-webkit-keyframes esui-loader-chasing-dots-rotate {
       100% {
           .transform(rotate(360deg));
       }
    }
    @keyframes esui-loader-chasing-dots-rotate {
       100% {
           .transform(rotate(360deg));
       }
    }
    @-webkit-keyframes esui-loader-chasing-dots-bounce {
        0%, 100% {
            .transform(scale(0.0));
        }
        50% {
            .transform(scale(1.0));
        }
    }
    @keyframes esui-loader-chasing-dots-bounce {
        0%, 100% {
            .transform(scale(0.0));
        }
        50% {
            .transform(scale(1.0));
        }
    }
}

//spinner circles
.esui-loader-spinner-circles(@size:3em, @dotSize:.5em) {
    .@{ui-class-prefix}-loader-spinner-circles {
        position: relative;
        .size(@size);
        > div {
            position: absolute;
            width: 100%;
            height: 100%;
            div {
                .size(@dotSize);
                background-color: @esui-loader-color-for-light-bg;
                border-radius: 100%;
                position: absolute;
                .animation(esui-loader-spinner-circles 1.2s infinite ease-in-out);
                // Prevent first frame from flickering when animation starts
                .animation-fill-mode(both);
            }
            :nth-child(1) {
                top: 0;
                left: 0;
            }
            :nth-child(2) {
                top: 0;
                right: 0;
            }
            :nth-child(3) {
                right: 0;
                bottom: 0;
            }
            :nth-child(4) {
                left: 0;
                bottom: 0;
            }
        }
        :nth-child(1) {
            :nth-child(2) {
                .animation-delay(-0.9s);
            }
            :nth-child(3) {
                .animation-delay(-0.6s);
            }
        }
        :nth-child(2) {
            .transform(rotateZ(45deg));
            :nth-child(1) {
                .animation-delay(-1.1s);
            }
            :nth-child(2) {
                .animation-delay(-0.8s);
            }
            :nth-child(3) {
                .animation-delay(-0.5s);
            }
        }
        :nth-child(3) {
            .transform(rotateZ(90deg));
            :nth-child(1) {
                .animation-delay(-1.0s);
            }
            :nth-child(2) {
                .animation-delay(-0.7s);
            }
            :nth-child(3) {
                .animation-delay(-0.4s);
            }
        }
    }
    @-webkit-keyframes esui-loader-spinner-circles {
        0%, 80%, 100% {
            .transform(scale(0.0)); 
        }
        40% {
            .transform(scale(1.0));
        } 
    }
}
